Kyber exposes a set of SVG icons that are usable as React components.

pnpm i @emoney/kyber-icons

import { IconFileGif } from '@emoney/kyber-icons';

Icons are sized relative to the text around them. To make them larger or smaller, set the font size of the icon or the parent element accordingly.

Result

Live Editor

<KyberIcons.IconFileGif style={{ fontSize: '3rem' }} />

Color can be customized with the color prop. All valid CSS values for colors (e.g., variables, hex, rgba, etc.) are supported.

Result

Live Editor

<KyberIcons.IconDiamond01 color="var(--bs-success)" style={{ fontSize: '3rem' }} />

Props are spread onto the <svg> element, so any props supported by SVGs are supported on these Icons.

All Icons

Result

Live Editor

function Example() {
	const [filter, setFilter] = React.useState('');

	const filteredIcons = Object.fromEntries(
		Object.entries(KyberIcons).filter(([name]) =>
			name.toLowerCase().includes(filter.toLowerCase()),
		),
	);

	return (
		<>
			<Search onChange={setFilter} />
			<div
				style={{
					display: 'grid',
					gridTemplateColumns: 'repeat(auto-fill, 100px)',
					gridGap: '2rem',
					fontSize: '3rem',
				}}
			>
				{Object.keys(filteredIcons).map((icon) => {
					const Component = KyberIcons[icon];
					return (
						<div className="text-center">
							<Component />
							<br />
							<div className="fs-xxs">{icon}</div>
						</div>
					);
				})}
			</div>
		</>
	);
}

render(<Example />);